<template>
    <div>
      <van-tabs  v-model="active"  swipeable color="#0287FF" :line-width=45  title-active-color="#000" title-inactive-color="#C2C9D3" style="height: 100%">
        <van-tab title="未使用" >
            <!-- <div  v-if="arr.length==1||arr.length=='1'" class="chen-kongbai">
						<div class="chen-kongpic">
							<img src="static/img/kongbai.png" mode=""></img>
						</div>
						<div class="chen-kong-text"><span>您还没有优惠券</span></div>
					</div> -->
					<div >
						<div style="margin-top: 0.07rem;width: 92%;margin: auto" v-for="(item,index) in arr" :key="index">
							<div class="con">
								<p class="zhe" >
								  {{item.rate}}<span>折</span>
								</p>
								<div class="time">
									<p>{{item.rate}}折优惠券</p>
									<p>有效期至 {{item.end_time}}</p>
								</div>
								<van-button type="info" class="info" v-if='item.status==1||item.status=="1"'>立即使用</van-button>
								<van-button type="default" v-else  class="info1">不可使用</van-button>
							</div>
						</div>
					</div>
					
          <!--空白页-->
          <!--<p style="text-align: center">-->
            <!--<img src="static/img/kongbai.png" alt="" class="kong">-->
          <!--</p>-->
        </van-tab>
        <van-tab title="已使用">
          
          <!--空白页-->
          <p style="text-align: center">
            <img src="../../../src/assets/img/kongbai.png" alt="" class="kong">
          </p>
          
          
        </van-tab>
      </van-tabs>
			<!-- <div class="loadmore">
				<img src="static/img/load.gif" alt="">
			</div> -->
    </div>
</template>

<script>
    export default {
        name: "myyouhui",
      data(){
          return{
             active:0,
            arr:[],
            arr1:[]
          }
      },
			methods:{
				// 查询用户可用优惠券
			
			},
			mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	

        var _this=this

       this.axios.get(this.$store.state.url +'User/coupon',{
           parmas:{
              status:1
             }
       }).then(res=>{
          // console.log(res.data.data)
           _this.arr=res.data.data
           
           })
       this.axios.get(this.$store.state.url +'User/coupon',{
           parmas:{
              status:2
             }
       }).then(res=>{
          // console.log(res.data)
           })
       
         
			}
    }
</script>

<style scoped>
  .van-hairline--top-bottom::after{
    border-width: 0 0;
  }
.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .con{
    width: 100%;
    height: 1.37rem;
    margin-top: 0.3rem;
    background: url("../../../src/assets/img/person/yi.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .zhe{
    font-size:0.6rem;
    font-weight:bold;
    color:rgba(222,34,48,1);
    line-height:0.44rem;
  }
  .zhe span{
    font-size:0.34rem;
    color:rgba(222,34,48,1);
    line-height:0.24rem;
  }
  .time p:nth-child(1){
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .time p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    margin-top: 0.1rem;
  }
  .info{
    width:1.6rem;
    height:0.46rem;
    background:rgba(2,135,255,1);
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
  }
  .info1{
    width:1.6rem;
    height:0.46rem;
    background:#999999;
    border-radius:0.23rem;
    font-size: 0.24rem;
    line-height: 0.46rem;
    color: #fff;
  }
</style>
